<template>
  <div class="page-header-index-wide">
    <a-row>
      <a-col :span="24">
        <a-card :bordered="false" title="职员数据统计分析" :style="{ marginTop: '12px' }">
          <a-row>
            <a-col :span="12">
              <div id="echart2" style="height: 400px"></div>
            </a-col>
            <a-col :span="12">
              <div id="echart1" style="height: 400px"></div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-card :bordered="false" title="数据联动" :style="{ marginTop: '12px' }">
          <a-row>
            <a-col :span="24">
              <div id="echart3" style="height: 600px"></div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <!-- <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="受理量" :total="cardCount.sll | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="up" style="margin-right: 16px">
              <span slot="term">周同比</span>
              12%
            </trend>
            <trend flag="down">
              <span slot="term">日同比</span>
              11%
            </trend>
          </div>
          <template slot="footer">日均销售额<span>￥ 234.56</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :datasource="chartData.bjl" />
          </div>
          <template slot="footer"
            >今日办结量：<span>{{ todayBjl }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :datasource="chartData.isll" :height="50" />
          </div>
          <template slot="footer"
            >用户今日受理量：<span>{{ todayISll }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <line-chart-multid :fields="visitFields" :dataSource="vistData" :height="80"></line-chart-multid>
          </div>
          <template slot="footer"
            >用户今日办结量：<span>{{ todayIBjl }}</span></template
          >
        </chart-card>
      </a-col>
    </a-row> -->

    <!-- <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{ width: '256px' }" />
          </div>

          <a-tab-pane tab="交互监管" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar-multid :sourceData="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{ padding: 0 }"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="12"
                        v-for="(item, index) in registerTypeList"
                        :key="'registerType' + index"
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom: 10px"
                          size="small"
                          type="primary"
                          ghost
                          >{{ item.text }}</a-button
                        >
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane loading="true" tab="受理监管" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <index-bar title="受理量统计" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{ padding: 0 }"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="12"
                        v-for="(item, index) in registerTypeList"
                        :key="'registerType' + index"
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom: 10px"
                          size="small"
                          type="primary"
                          ghost
                          >{{ item.text }}</a-button
                        >
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="存储监管" key="4">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <a-row>
                  <template v-if="diskInfo && diskInfo.length > 0">
                    <a-col :span="12" v-for="(item, index) in diskInfo" :key="'diskInfo' + index">
                      <dash-chart-demo :title="item.name" :datasource="item.restPPT"></dash-chart-demo>
                    </a-col>
                  </template>
                </a-row>
              </a-col>

              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{ padding: 0 }"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="10"
                        v-for="(item, index) in registerTypeList"
                        :key="'registerType' + index"
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom: 10px"
                          size="small"
                          type="primary"
                          ghost
                          >{{ item.text }}</a-button
                        >
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card> -->

    <!-- <a-row :gutter="12">
      <a-card :loading="loading" :class="{ 'anty-list-cust': true }" :bordered="false" :style="{ marginTop: '24px' }">
        <a-tabs v-model="indexBottomTab" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <a-radio-group v-model="indexRegisterType" @change="changeRegisterType">
              <a-radio-button value="转移登记">转移登记</a-radio-button>
              <a-radio-button value="抵押登记">抵押登记</a-radio-button>
              <a-radio-button value="">所有</a-radio-button>
            </a-radio-group>
          </div>

          <a-tab-pane loading="true" tab="业务流程限时监管" key="1">
            <a-table
              :dataSource="dataSource1"
              size="default"
              rowKey="id"
              :columns="columns"
              :pagination="ipagination1"
              @change="tableChange1"
            >
              <template slot="flowRate" slot-scope="text, record, index">
                <a-progress
                  :strokeColor="getPercentColor(record.flowRate)"
                  :format="getPercentFormat"
                  :percent="getFlowRateNumber(record.flowRate)"
                  style="width: 80px"
                />
              </template>
            </a-table>
          </a-tab-pane>

          <a-tab-pane loading="true" tab="业务节点限时监管" key="2">
            <a-table
              :dataSource="dataSource2"
              size="default"
              rowKey="id"
              :columns="columns2"
              :pagination="ipagination2"
              @change="tableChange2"
            >
              <template slot="flowRate" slot-scope="text, record, index">
                <span style="color: red">{{ record.flowRate }}小时</span>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-row> -->
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  ToolboxComponent,
  LegendComponent,
  DatasetComponent,
  GridComponent,
} from 'echarts/components'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  LineChart,
  BarChart,
  PieChart,
  CanvasRenderer,
  DatasetComponent,
  GridComponent,
])

import LineChartMultid from '@/components/chart/LineChartMultid'
import Pie from '@/components/chart/Pie'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import ChartCard from '@/components/ChartCard'
import MiniBar from '@/components/chart/MiniBar'
import MiniArea from '@/components/chart/MiniArea'
import IndexBar from '@/components/chart/IndexBar'
import BarMultid from '@/components/chart/BarMultid'
import DashChartDemo from '@/components/chart/DashChartDemo'

import Trend from '@/components/Trend'

const jhjgData = [
  {
    type: '房管',
    '1月': 900,
    '2月': 1120,
    '3月': 1380,
    '4月': 1480,
    '5月': 1450,
    '6月': 1100,
    '7月': 1300,
    '8月': 900,
    '9月': 1000,
    '10月': 1200,
    '11月': 600,
    '12月': 900,
  },
  {
    type: '税务',
    '1月': 1200,
    '2月': 1500,
    '3月': 1980,
    '4月': 2000,
    '5月': 1000,
    '6月': 600,
    '7月': 900,
    '8月': 1100,
    '9月': 1300,
    '10月': 2000,
    '11月': 900,
    '12月': 1100,
  },
  {
    type: '不动产',
    '1月': 2000,
    '2月': 1430,
    '3月': 1300,
    '4月': 1400,
    '5月': 900,
    '6月': 500,
    '7月': 600,
    '8月': 1000,
    '9月': 600,
    '10月': 1000,
    '11月': 1500,
    '12月': 1200,
  },
]

const jhjgFields = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

const xljgData = [
  { type: '一月', 房管: 1.12, 税务: 1.55, 不动产: 1.2 },
  { type: '二月', 房管: 1.65, 税务: 1.32, 不动产: 1.42 },
  { type: '三月', 房管: 1.85, 税务: 1.1, 不动产: 1.5 },

  { type: '四月', 房管: 1.33, 税务: 1.63, 不动产: 1.4 },
  { type: '五月', 房管: 1.63, 税务: 1.8, 不动产: 1.7 },
  { type: '六月', 房管: 1.85, 税务: 1.98, 不动产: 1.8 },

  { type: '七月', 房管: 1.98, 税务: 1.5, 不动产: 1.76 },
  { type: '八月', 房管: 1.48, 税务: 1.2, 不动产: 1.3 },
  { type: '九月', 房管: 1.41, 税务: 1.9, 不动产: 1.6 },

  { type: '十月', 房管: 1.1, 税务: 1.1, 不动产: 1.4 },
  { type: '十一月', 房管: 1.85, 税务: 1.6, 不动产: 1.5 },
  { type: '十二月', 房管: 1.5, 税务: 1.4, 不动产: 1.3 },
]
const xljgFields = ['房管', '税务', '不动产']

const dataCol1 = [
  {
    title: '业务号',
    align: 'center',
    dataIndex: 'reBizCode',
  },
  {
    title: '业务类型',
    align: 'center',
    dataIndex: 'type',
  },
  {
    title: '受理人',
    align: 'center',
    dataIndex: 'acceptBy',
  },
  {
    title: '受理时间',
    align: 'center',
    dataIndex: 'acceptDate',
  },
  {
    title: '当前节点',
    align: 'center',
    dataIndex: 'curNode',
  },
  {
    title: '办理时长',
    align: 'center',
    dataIndex: 'flowRate',
    scopedSlots: { customRender: 'flowRate' },
  },
]
const dataSource1 = [
  { reBizCode: '1', type: '转移登记', acceptBy: '张三', acceptDate: '2019-01-22', curNode: '任务分派', flowRate: 60 },
  { reBizCode: '2', type: '抵押登记', acceptBy: '李四', acceptDate: '2019-01-23', curNode: '领导审核', flowRate: 30 },
  { reBizCode: '3', type: '转移登记', acceptBy: '王武', acceptDate: '2019-01-25', curNode: '任务处理', flowRate: 20 },
  { reBizCode: '4', type: '转移登记', acceptBy: '赵楼', acceptDate: '2019-11-22', curNode: '部门审核', flowRate: 80 },
  { reBizCode: '5', type: '转移登记', acceptBy: '钱就', acceptDate: '2019-12-12', curNode: '任务分派', flowRate: 90 },
  { reBizCode: '6', type: '转移登记', acceptBy: '孙吧', acceptDate: '2019-03-06', curNode: '任务处理', flowRate: 10 },
  { reBizCode: '7', type: '抵押登记', acceptBy: '周大', acceptDate: '2019-04-13', curNode: '任务分派', flowRate: 100 },
  { reBizCode: '8', type: '抵押登记', acceptBy: '吴二', acceptDate: '2019-05-09', curNode: '任务上报', flowRate: 50 },
  { reBizCode: '9', type: '抵押登记', acceptBy: '郑爽', acceptDate: '2019-07-12', curNode: '任务处理', flowRate: 63 },
  { reBizCode: '20', type: '抵押登记', acceptBy: '林有', acceptDate: '2019-12-12', curNode: '任务打回', flowRate: 59 },
  { reBizCode: '11', type: '转移登记', acceptBy: '码云', acceptDate: '2019-09-10', curNode: '任务签收', flowRate: 87 },
]

const dataCol2 = [
  {
    title: '业务号',
    align: 'center',
    dataIndex: 'reBizCode',
  },
  {
    title: '受理人',
    align: 'center',
    dataIndex: 'acceptBy',
  },
  {
    title: '发起时间',
    align: 'center',
    dataIndex: 'acceptDate',
  },
  {
    title: '当前节点',
    align: 'center',
    dataIndex: 'curNode',
  },
  {
    title: '超时时间',
    align: 'center',
    dataIndex: 'flowRate',
    scopedSlots: { customRender: 'flowRate' },
  },
]
const dataSource2 = [
  {
    reBizCode: 'A001',
    type: '转移登记',
    acceptBy: '张四',
    acceptDate: '2019-01-22',
    curNode: '任务分派',
    flowRate: 12,
  },
  { reBizCode: 'A002', type: '抵押登记', acceptBy: '李吧', acceptDate: '2019-01-23', curNode: '任务签收', flowRate: 3 },
  {
    reBizCode: 'A003',
    type: '转移登记',
    acceptBy: '王三',
    acceptDate: '2019-01-25',
    curNode: '任务处理',
    flowRate: 24,
  },
  {
    reBizCode: 'A004',
    type: '转移登记',
    acceptBy: '赵二',
    acceptDate: '2019-11-22',
    curNode: '部门审核',
    flowRate: 10,
  },
  { reBizCode: 'A005', type: '转移登记', acceptBy: '钱大', acceptDate: '2019-12-12', curNode: '任务签收', flowRate: 8 },
  {
    reBizCode: 'A006',
    type: '转移登记',
    acceptBy: '孙就',
    acceptDate: '2019-03-06',
    curNode: '任务处理',
    flowRate: 10,
  },
  {
    reBizCode: 'A007',
    type: '抵押登记',
    acceptBy: '周晕',
    acceptDate: '2019-04-13',
    curNode: '部门审核',
    flowRate: 24,
  },
  {
    reBizCode: 'A008',
    type: '抵押登记',
    acceptBy: '吴有',
    acceptDate: '2019-05-09',
    curNode: '部门审核',
    flowRate: 30,
  },
  { reBizCode: 'A009', type: '抵押登记', acceptBy: '郑武', acceptDate: '2019-07-12', curNode: '任务分派', flowRate: 1 },
  {
    reBizCode: 'A0010',
    type: '抵押登记',
    acceptBy: '林爽',
    acceptDate: '2019-12-12',
    curNode: '部门审核',
    flowRate: 16,
  },
  {
    reBizCode: 'A0011',
    type: '转移登记',
    acceptBy: '码楼',
    acceptDate: '2019-09-10',
    curNode: '部门审核',
    flowRate: 7,
  },
]

export default {
  name: 'IndexBdc',
  components: {
    LineChartMultid,
    Pie,
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    DashChartDemo,
    BarMultid,
    IndexBar,
    Trend,
  },
  data() {
    return {
      pieData: [
        { value: 1, key: 2017 },
        { value: 12, key: 2020 },
        { value: 1, key: 2021 },
      ],
      visitFields: ['ip', 'visit'],
      vistData: [
        {
          tian: '2020-07-21',
          ip: 1509,
          visit: 3443,
          type: '07-21',
        },
        {
          tian: '2020-07-22',
          ip: 1486,
          visit: 3482,
          type: '07-22',
        },
        {
          tian: '2020-07-23',
          ip: 1554,
          visit: 3533,
          type: '07-23',
        },
        {
          tian: '2020-07-24',
          ip: 1386,
          visit: 3132,
          type: '07-24',
        },
        {
          tian: '2020-07-25',
          ip: 608,
          visit: 1111,
          type: '07-25',
        },
        {
          tian: '2020-07-26',
          ip: 420,
          visit: 710,
          type: '07-26',
        },
        {
          tian: '2020-07-27',
          ip: 1408,
          visit: 3056,
          type: '07-27',
        },
      ],
      loading: true,
      cardCount: {
        sll: 100,
        bjl: 87,
        isll: 15,
        ibjl: 9,
      },

      todaySll: 60,
      todayBjl: 54,
      todayISll: 13,
      todayIBjl: 7,

      chartData: {
        sll: [],
        bjl: [],
        isll: [],
        ibjl: [],
      },
      jhjgFields,
      jhjgData,

      xljgData,
      xljgFields,

      diskInfo: [
        { name: 'C盘', restPPT: 7 },
        { name: 'D盘', restPPT: 5 },
      ],

      registerTypeList: [
        {
          text: '业务受理',
        },
        {
          text: '业务管理',
        },
        {
          text: '文件管理',
        },
        {
          text: '信息查询',
        },
      ],

      dataSource1: [],
      dataSource2: [],
      columns: dataCol1,
      columns2: dataCol2,
      ipagination1: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      ipagination2: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      indexRegisterType: '转移登记',
      indexBottomTab: '1',
    }
  },
  methods: {
    goPage() {
      this.$message.success('根据业务自行处理跳转页面!')
    },
    changeRegisterType(e) {
      this.indexRegisterType = e.target.value
      if (this.indexBottomTab == '1') {
        this.loadDataSource1()
      } else {
        this.loadDataSource2()
      }
    },
    tableChange1(pagination) {
      this.ipagination1.current = pagination.current
      this.ipagination1.pageSize = pagination.pageSize
      this.queryTimeoutInfo()
    },
    tableChange2(pagination) {
      this.ipagination2.current = pagination.current
      this.ipagination2.pageSize = pagination.pageSize
      this.queryNodeTimeoutInfo()
    },
    getFlowRateNumber(value) {
      return Number(value)
    },
    getPercentFormat(value) {
      if (value == 100) {
        return '超时'
      } else {
        return value + '%'
      }
    },
    getPercentColor(value) {
      let p = Number(value)
      if (p >= 90 && p < 100) {
        return 'rgb(244, 240, 89)'
      } else if (p >= 100) {
        return 'red'
      } else {
        return 'rgb(16, 142, 233)'
      }
    },

    loadDataSource1() {
      this.dataSource1 = dataSource1.filter((item) => {
        if (!this.indexRegisterType) {
          return true
        }
        return item.type == this.indexRegisterType
      })
    },
    loadDataSource2() {
      this.dataSource2 = dataSource2.filter((item) => {
        if (!this.indexRegisterType) {
          return true
        }
        return item.type == this.indexRegisterType
      })
    },
    drawLine() {
      var chartDom = document.getElementById('echart1')
      var chartDom2 = document.getElementById('echart2')
      var chartDom3 = document.getElementById('echart3')
      var myChart = echarts.init(chartDom)
      var myChart2 = echarts.init(chartDom2)
      var myChart3 = echarts.init(chartDom3)
      myChart.setOption({
        title: {
          text: 'Step Line',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['Step Start', 'Step Middle', 'Step End'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: 'Step Start',
            type: 'line',
            step: 'start',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: 'Step Middle',
            type: 'line',
            step: 'middle',
            data: [220, 282, 201, 234, 290, 430, 410],
          },
          {
            name: 'Step End',
            type: 'line',
            step: 'end',
            data: [450, 432, 401, 454, 590, 530, 510],
          },
        ],
      })
      myChart2.setOption({
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' },
            ],
          },
        ],
      });
      myChart3.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4],
          ],
        },
        xAxis: [
          { type: 'category', gridIndex: 0 },
          { type: 'category', gridIndex: 1 },
        ],
        yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
        grid: [{ bottom: '55%' }, { top: '55%' }],
        series: [
          // These series are in the first grid.
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          { type: 'bar', seriesLayoutBy: 'row' },
          // These series are in the second grid.
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        ],
      })
    },
  },
  mounted() {
    this.drawLine()
  },
  created() {
    this.loadDataSource1()
    this.loadDataSource2()
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;
  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.item-group {
  .more-btn {
    margin-bottom: 13px;
    text-align: center;
  }
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
}

@media only screen and (min-width: 1600px) {
  .list-content-item {
    margin-left: 60px;
  }
}

@media only screen and (max-width: 1300px) {
  .list-content-item {
    margin-left: 20px;
  }
  .width-hidden4 {
    display: none;
  }
}
.list-content-item {
  span {
    line-height: 20px;
  }
}
.list-content-item {
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}
.anty-list-cust {
  .ant-list-item-meta {
    flex: 0.3 !important;
  }
}
.anty-list-cust {
  .ant-list-item-content {
    flex: 1 !important;
    justify-content: flex-start !important;
    margin-left: 20px;
  }
}
</style>